
<template>
  <div class="line-page">
  <div class="line" ref="lineRef" style="width: 850px; height: 260px"></div>
  <div class="icon-back" @click="handleClickBack">
    <Back color="#d7d7d7" style="width: 2em; height: 2em; margin-right: 8px" />
  </div>
  </div>


</template>

<style scoped lang="scss">

</style>

<script>
import * as echarts from 'echarts'
import {getIndexTableData} from "../../../api/equipment/index"
// let chart = null
export default {
  props:{
    basicInfo:String,//序列号
    healthSelectData:String,//下拉选中的值
    dictData:Object,//字典
    rawData:Object
  },
  watch:{
    basicInfo:{
      handler(val){
        console.log(val,"<<<=== val 序列号监听到新值")
      }
    },
    healthSelectData:{
      handler(val){
        console.log(val,"<<<=== val-监听到新值")
        this.healthData=val
        this.page=1
        this.getFoldLineData()
      },
      deep:true,
      immediate:true
    },


  },

  name:'line',
  data(){
    return{
      totalPage:null,
      page:1,
      limit:10,
      basicInfoImei:this.basicInfo,
      rawDataArr:this.rawData,
      dictArr:this.dictData,
      chart:null,
      healthData:this.healthSelectData,
      timeArr:[],
      valueArr:[]
    }
  },
  mounted() {
    this.getFoldLineData()

    this.chart = echarts.init(this.$refs.lineRef)
    this.setOptions(this.timeArr,this.valueArr)
  },
  methods:{

    // 发请求拿到数据
    getFoldLineData(){
      // 组装参数
      const params={
        page:this.page,
        limit:this.limit,
        imei:this.basicInfoImei,
        indexType:this.healthData
      }

      getIndexTableData(params).then((res)=>{
        console.log(res,"<<<=== res 折线请求结果")
        this.page=res.page.currPage
        console.log(this.page,"<<<===this.page 当前第几页")

        this.totalPage=res.page.totalPage
        console.log(this.totalPage,"<<<===this.totalPage 一共有几页")

        // 数据改造
        this.changeTimeArr(res.page.list)
        this.changeValueArr(res.page.list) 
        // 图形渲染
        this.setOptions(this.timeArr,this.valueArr)

      }).catch((error)=>{
        console.log(error,"error")
      })

    },

    // 点击箭头图标触发事件
    handleClickBack(){
      console.log("点击了")
      console.log(this.page,"<<<=== this.page")

      // 判断当前第几页是否比总页少，少就自动加1，发请求
      if(this.page<this.totalPage){
        this.page=this.page+1
        console.log(this.page,"<<<=== this.page2")
        this.getFoldLineData()
      }else{
        return
      }
      
    },

    // 检查高了还是低了
    test(data){

    const match = this.dictArr.find((item) => {
      return item.value == this.healthSelectData;
    });

    // console.log(match,"match")

    //在健康指标数据里根据中文进行匹配找到匹配的元素
    const lastMatch = this.rawDataArr.find((item) => {
      return item.indexName == match.label;
    });
    // console.log(lastMatch, "<<<=== lastMatch 健康指标数据匹配到的元素");


      // 进行比较
      if (lastMatch.upperLimit == null) {
    if (data.indexValue < lastMatch.lowerLimit) {
      return false;
    } else {
      return true;
    }
  } else if (lastMatch.lowerLimit == null) {
    if (data.indexValue > lastMatch.upperLimit) {
      return false;
    } else {
      return true;
    }
  }else{
    // console.log(data.indexValue,"<<<=== data.indexValue-判断")
    // console.log(typeof data.indexValue === "string" )
    // console.log(lastMatch.upperLimit,"<<<=== lastMatch.upperLimit-判断")
    // console.log(typeof lastMatch.upperLimit === "string" )
    

    if(Number(data.indexValue) > Number(lastMatch.upperLimit) ){
      return false
    }

    if(Number(data.indexValue) < Number(lastMatch.lowerLimit)){
      return false
    }

    return true

   
};

    },
    // 改造值数组
    changeValueArr(data){
      // console.log(data,"<<<=== data-传进来的数据-折线-值")

      this.valueArr=data.map((item)=>{
        // 添加成员
        item.value=item.indexValue
        item.label={
          show:true,
          position:"top",
          textStyle:{
            color:this.test(item)?"#409EFF":"red"
          }
        }

        return item

        
      })

      // console.log(this.valueArr,"<<<=== this.valueArr222")
    },
    
    // 改造x轴的时间数组
    changeTimeArr(data){

      console.log(data,"<<<=== data-传进来的数据-折线")
      this.timeArr=data.map((item)=>{
        return item.datetime
      })

      // console.log(this.timeArr,"<<<=== this.timeArr 改造后")

    },

    setOptions(timeData,sericeData) {
      const option = {
        color: ['#409EFF'], // 设置折线图的颜色
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: { type: 'cross' },
        // },
        xAxis: {
          type: 'category',
          boundaryGap: true, 
          data: timeData,
          axisLabel: {
            formatter: function (value) {
              return value.split('\n').join('\n');
            },
          },
          axisTick: {
            show: false,
          },
          
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false, // 设置为 false，隐藏横向网格线
          },
          // axisLabel:{
          //   formatter:function(value){
          //     let texts = [];
          //     if(value>60){
          //       texts.push(60)
          //     }
          //     console.log(value,"y轴的value")

          //     return texts;
          //   }
          // }

        },
        series: [
          {
            data: sericeData,
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 2,
              type: 'solid',
              color: '#409EFF',
            },
            // label:{
            //   show:true,
            //   position:"top",
            //   textStyle:{
            //     color:"#409EFF"
            //   }
            // },
            // itemStyle: {
            //   color: 'red',
            // },

          },
        ],

      };
      this.chart.setOption(option);
    },
  }
}
</script>

<style lang="scss" scoped>
.line-page{
  position: relative;
}

.icon-back{
  position: absolute;
  top:195px;
  left: 65px;
  cursor: pointer;
  
}
</style>
